import { Tabs } from 'antd';
import { useRouter } from 'next/router';
import { useTranslation } from 'react-i18next';
import dynamic from 'next/dynamic';

// 动态加载管理组件
const UserManagement = dynamic(() => import('./user-management'), { ssr: false });
const RoleManagement = dynamic(() => import('./role-management'), { ssr: false });
const MenuManagement = dynamic(() => import('./menu-management'), { ssr: false });

const AdminPage = () => {
  const { t } = useTranslation();
  const router = useRouter();
  const { tab } = router.query;

  const activeTab = (tab as string) || 'users';

  const handleTabChange = (key: string) => {
    router.push({
      pathname: '/admin',
      query: { tab: key },
    });
  };

  const items = [
    {
      key: 'users',
      label: t('user_management') || '用户管理',
      children: <UserManagement />,
    },
    {
      key: 'roles',
      label: t('role_management') || '角色管理',
      children: <RoleManagement />,
    },
    {
      key: 'menus',
      label: t('menu_management') || '菜单管理',
      children: <MenuManagement />,
    },
  ];

  return (
    <div style={{ minHeight: '100vh', background: '#f0f2f5' }}>
      <div
        style={{
          background: '#fff',
          padding: '20px 24px',
          borderBottom: '1px solid #f0f0f0',
        }}
      >
        <h1 style={{ margin: 0, fontSize: 24 }}>{t('system_management') || '系统管理'}</h1>
      </div>
      <div style={{ padding: 24 }}>
        <div style={{ background: '#fff', borderRadius: 8, minHeight: 600 }}>
          <Tabs activeKey={activeTab} onChange={handleTabChange} items={items} style={{ padding: '0 24px' }} />
        </div>
      </div>
    </div>
  );
};

export default AdminPage;
